<template>
  <div class="games-container">
    <AppHeader />

    <div class="content-wrapper">
      <!-- 侧边导航 -->
      <SideNav 
        :title="'游戏中心'"
        :tabs="tabs"
        :active-tab="activeTab"
        @tab-click="handleTabClick"
      />

      <!-- 主要内容区域 -->
      <main class="games-main">
      <!-- 推荐游戏 -->
      <section v-if="activeTab === 'recommend'" class="games-section">
        <h2 class="section-title">推荐游戏</h2>
        
        <!-- 精选游戏轮播 -->
        <div class="featured-carousel">
          <div class="carousel-item" v-for="(game, index) in featuredGames" :key="index" :class="{ active: currentSlide === index }">
            <div class="carousel-content" @click="openGameDetail(game)">
              <img :src="game.banner" :alt="game.title" class="carousel-image" />
              <div class="carousel-info">
                <h3 class="carousel-title">{{ game.title }}</h3>
                <p class="carousel-desc">{{ game.description }}</p>
                <div class="carousel-actions">
                  <button class="btn-play" @click.stop="playGame(game)">立即游玩</button>
                  <button class="btn-download" @click.stop="downloadGame(game)">下载游戏</button>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 轮播控制 -->
          <div class="carousel-controls">
            <button class="carousel-prev" @click="prevSlide">&lt;</button>
            <button class="carousel-next" @click="nextSlide">&gt;</button>
          </div>
          
          <!-- 轮播指示器 -->
          <div class="carousel-indicators">
            <button 
              v-for="(game, index) in featuredGames" 
              :key="index"
              class="indicator" 
              :class="{ active: currentSlide === index }"
              @click="currentSlide = index"
            ></button>
          </div>
        </div>

        <!-- 热门游戏 -->
        <div class="hot-games-section">
          <h3 class="category-title">热门游戏</h3>
          <div class="games-grid">
            <div 
              v-for="game in hotGames" 
              :key="game.id" 
              class="game-card"
              @click="openGameDetail(game)"
            >
              <div class="game-cover">
                <img :src="game.cover" alt="{{ game.title }}" />
                <div v-if="game.isNew" class="new-badge">新游</div>
                <div v-if="game.isExclusive" class="vip-badge">独家</div>
              </div>
              <h4 class="game-title">{{ game.title }}</h4>
              <div class="game-meta">
                <span class="game-score">{{ game.score }}</span>
                <span class="game-category">{{ game.category }}</span>
              </div>
              <div class="game-stats">
                <span class="stat-item">{{ game.playCount }}人在玩</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 最新上架 -->
      <section v-else-if="activeTab === 'new'" class="games-section">
        <h2 class="section-title">最新上架</h2>
        <div class="filter-bar">
          <div class="filter-options">
            <button 
              v-for="filter in filters" 
              :key="filter.key" 
              class="filter-button"
              :class="{ active: activeFilter === filter.key }"
              @click="activeFilter = filter.key"
            >
              {{ filter.name }}
            </button>
          </div>
          <div class="sort-options">
            <select v-model="sortBy" class="sort-select">
              <option value="newest">最新上架</option>
              <option value="popularity">人气优先</option>
              <option value="score">评分优先</option>
            </select>
          </div>
        </div>
        
        <div class="games-grid">
          <div 
            v-for="game in newGames" 
            :key="game.id" 
            class="game-card"
            @click="openGameDetail(game)"
          >
            <div class="game-cover">
              <img :src="game.cover" alt="{{ game.title }}" />
              <div class="new-badge">新游</div>
              <div class="release-date">{{ game.releaseDate }}</div>
            </div>
            <h4 class="game-title">{{ game.title }}</h4>
            <div class="game-meta">
              <span class="game-score">{{ game.score }}</span>
              <span class="game-category">{{ game.category }}</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 分类浏览 -->
      <section v-else-if="activeTab === 'categories'" class="games-section">
        <h2 class="section-title">游戏分类</h2>
        
        <div class="category-grid">
          <div 
            v-for="category in gameCategories" 
            :key="category.id" 
            class="category-card"
            @click="browseCategory(category)"
          >
            <div class="category-icon">{{ category.icon }}</div>
            <h4 class="category-name">{{ category.name }}</h4>
            <p class="category-count">{{ category.gameCount }}款游戏</p>
          </div>
        </div>
      </section>

      <!-- 我的游戏 -->
      <section v-else-if="activeTab === 'my'" class="games-section">
        <h2 class="section-title">我的游戏</h2>
        
        <div class="my-games-tabs">
          <button 
            v-for="tab in myGamesTabs" 
            :key="tab.key" 
            class="tab-button"
            :class="{ active: activeMyGamesTab === tab.key }"
            @click="activeMyGamesTab = tab.key"
          >
            {{ tab.name }}
          </button>
        </div>
        
        <div v-if="activeMyGamesTab === 'playing'" class="games-grid">
          <div 
            v-for="game in playingGames" 
            :key="game.id" 
            class="game-card"
            @click="openGameDetail(game)"
          >
            <div class="game-cover">
              <img :src="game.cover" alt="{{ game.title }}" />
              <div class="progress-bar">
                <div class="progress" :style="{ width: game.progress + '%' }"></div>
              </div>
            </div>
            <h4 class="game-title">{{ game.title }}</h4>
            <div class="game-progress">进度: {{ game.progress }}%</div>
            <button class="btn-continue" @click.stop="continueGame(game)">继续游戏</button>
          </div>
        </div>
        
        <div v-else-if="activeMyGamesTab === 'favorites'" class="games-grid">
          <div 
            v-for="game in favoriteGames" 
            :key="game.id" 
            class="game-card"
            @click="openGameDetail(game)"
          >
            <div class="game-cover">
              <img :src="game.cover" alt="{{ game.title }}" />
              <div class="favorite-icon">❤️</div>
            </div>
            <h4 class="game-title">{{ game.title }}</h4>
            <div class="game-meta">
              <span class="game-score">{{ game.score }}</span>
              <span class="game-category">{{ game.category }}</span>
            </div>
          </div>
        </div>
      </section>
    </main>
    </div>
    
    <footer class="app-footer">
      <div class="footer-content">
        <p>© 2024 游戏中心 - 版权所有</p>
      </div>
    </footer>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import AppHeader from '../components/AppHeader.vue'
import SideNav from '../components/SideNav.vue'

export default {
  name: 'GamesCenterView',
  components: {
    AppHeader,
    SideNav
  },
  methods: {
    handleTabClick(tabKey) {
      this.activeTab = tabKey
    }
  },
  setup() {
    // 导航标签
    const tabs = ref([
      { key: 'recommend', name: '推荐' },
      { key: 'new', name: '最新' },
      { key: 'categories', name: '分类' },
      { key: 'my', name: '我的', badge: '3' }
    ])
    
    const activeTab = ref('recommend')
    const currentSlide = ref(0)
    const filters = ref([
      { key: 'all', name: '全部' },
      { key: 'action', name: '动作' },
      { key: 'adventure', name: '冒险' },
      { key: 'rpg', name: 'RPG' },
      { key: 'strategy', name: '策略' }
    ])
    const activeFilter = ref('all')
    const sortBy = ref('newest')
    const myGamesTabs = ref([
      { key: 'playing', name: '最近游玩' },
      { key: 'favorites', name: '我的收藏' }
    ])
    const activeMyGamesTab = ref('playing')

    // 精选游戏数据
    const featuredGames = ref([
      {
        id: 1,
        title: '星际探险',
        description: '探索未知的宇宙，发现新的星球和文明',
        banner: 'https://picsum.photos/id/237/800/400',
        cover: 'https://picsum.photos/id/237/200/300'
      },
      {
        id: 2,
        title: '梦幻世界',
        description: '在奇幻世界中展开冒险，结交伙伴',
        banner: 'https://picsum.photos/id/238/800/400',
        cover: 'https://picsum.photos/id/238/200/300'
      },
      {
        id: 3,
        title: '战争前线',
        description: '参与激烈的军事对抗，争夺胜利',
        banner: 'https://picsum.photos/id/239/800/400',
        cover: 'https://picsum.photos/id/239/200/300'
      }
    ])

    // 热门游戏数据
    const hotGames = ref([
      {
        id: 1,
        title: '王者荣耀',
        cover: 'https://picsum.photos/id/240/200/300',
        score: 9.5,
        category: 'MOBA',
        playCount: 10000000,
        isNew: false,
        isExclusive: true
      },
      {
        id: 2,
        title: '和平精英',
        cover: 'https://picsum.photos/id/241/200/300',
        score: 9.2,
        category: '射击',
        playCount: 8000000,
        isNew: false,
        isExclusive: false
      },
      {
        id: 3,
        title: '原神',
        cover: 'https://picsum.photos/id/242/200/300',
        score: 9.7,
        category: 'RPG',
        playCount: 12000000,
        isNew: false,
        isExclusive: false
      },
      {
        id: 4,
        title: '英雄联盟手游',
        cover: 'https://picsum.photos/id/243/200/300',
        score: 9.4,
        category: 'MOBA',
        playCount: 9000000,
        isNew: false,
        isExclusive: false
      },
      {
        id: 5,
        title: '明日方舟',
        cover: 'https://picsum.photos/id/244/200/300',
        score: 9.1,
        category: '策略',
        playCount: 5000000,
        isNew: false,
        isExclusive: true
      },
      {
        id: 6,
        title: '幻塔',
        cover: 'https://picsum.photos/id/245/200/300',
        score: 8.8,
        category: 'RPG',
        playCount: 3000000,
        isNew: true,
        isExclusive: false
      }
    ])

    // 新游戏数据
    const newGames = ref([
      {
        id: 101,
        title: '星空奇缘',
        cover: 'https://picsum.photos/id/246/200/300',
        score: 9.0,
        category: 'RPG',
        releaseDate: '2024-01-15'
      },
      {
        id: 102,
        title: '战神归来',
        cover: 'https://picsum.photos/id/247/200/300',
        score: 8.9,
        category: '动作',
        releaseDate: '2024-01-14'
      },
      {
        id: 103,
        title: '魔法学院',
        cover: 'https://picsum.photos/id/248/200/300',
        score: 8.7,
        category: '模拟',
        releaseDate: '2024-01-12'
      },
      {
        id: 104,
        title: '赛车传奇',
        cover: 'https://picsum.photos/id/249/200/300',
        score: 9.1,
        category: '竞速',
        releaseDate: '2024-01-10'
      }
    ])

    // 游戏分类
    const gameCategories = ref([
      { id: '1', name: '动作游戏', icon: '⚔️', gameCount: 128 },
      { id: '2', name: '角色扮演', icon: '🎭', gameCount: 96 },
      { id: '3', name: '策略游戏', icon: '⚖️', gameCount: 72 },
      { id: '4', name: '模拟经营', icon: '🏢', gameCount: 85 },
      { id: '5', name: '射击游戏', icon: '🔫', gameCount: 112 },
      { id: '6', name: '音乐游戏', icon: '🎵', gameCount: 45 },
      { id: '7', name: '休闲游戏', icon: '🎮', gameCount: 203 },
      { id: '8', name: '竞技游戏', icon: '🏆', gameCount: 67 }
    ])

    // 最近游玩
    const playingGames = ref([
      {
        id: 201,
        title: '原神',
        cover: 'https://picsum.photos/id/242/200/300',
        progress: 45
      },
      {
        id: 202,
        title: '王者荣耀',
        cover: 'https://picsum.photos/id/240/200/300',
        progress: 78
      },
      {
        id: 203,
        title: '和平精英',
        cover: 'https://picsum.photos/id/241/200/300',
        progress: 32
      }
    ])

    // 收藏游戏
    const favoriteGames = ref([
      {
        id: 301,
        title: '王者荣耀',
        cover: 'https://picsum.photos/id/240/200/300',
        score: 9.5,
        category: 'MOBA'
      },
      {
        id: 302,
        title: '原神',
        cover: 'https://picsum.photos/id/242/200/300',
        score: 9.7,
        category: 'RPG'
      },
      {
        id: 303,
        title: '明日方舟',
        cover: 'https://picsum.photos/id/244/200/300',
        score: 9.1,
        category: '策略'
      },
      {
        id: 304,
        title: '英雄联盟手游',
        cover: 'https://picsum.photos/id/243/200/300',
        score: 9.4,
        category: 'MOBA'
      }
    ])

    // 轮播控制
    const prevSlide = () => {
      currentSlide.value = (currentSlide.value - 1 + featuredGames.value.length) % featuredGames.value.length
    }

    const nextSlide = () => {
      currentSlide.value = (currentSlide.value + 1) % featuredGames.value.length
    }

    // 游戏操作
    const openGameDetail = (game) => {
      console.log('打开游戏详情:', game.title)
      // 实际应用中应使用路由跳转
    }

    const playGame = (game) => {
      console.log('开始游戏:', game.title)
    }

    const downloadGame = (game) => {
      console.log('下载游戏:', game.title)
    }

    const browseCategory = (category) => {
      console.log('浏览分类:', category.name)
    }

    const continueGame = (game) => {
      console.log('继续游戏:', game.title)
    }

    onMounted(() => {
      // 自动轮播
      let interval = setInterval(() => {
        nextSlide()
      }, 5000)

      // 添加鼠标悬停暂停自动轮播
      const carousel = document.querySelector('.featured-carousel')
      if (carousel) {
        carousel.addEventListener('mouseenter', () => {
          clearInterval(interval)
        })
        carousel.addEventListener('mouseleave', () => {
          interval = setInterval(() => {
            nextSlide()
          }, 5000)
        })
      }

      // 清理
      return () => {
        clearInterval(interval)
        if (carousel) {
          carousel.removeEventListener('mouseenter', () => {})
          carousel.removeEventListener('mouseleave', () => {})
        }
      }
    })

    return {
      tabs,
      activeTab,
      currentSlide,
      filters,
      activeFilter,
      sortBy,
      myGamesTabs,
      activeMyGamesTab,
      featuredGames,
      hotGames,
      newGames,
      gameCategories,
      playingGames,
      favoriteGames,
      prevSlide,
      nextSlide,
      openGameDetail,
      playGame,
      downloadGame,
      browseCategory,
      continueGame
    }
  }
}
</script>

<style scoped>
.games-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  display: flex;
  flex: 1;
}

.games-main {
  flex: 1;
  max-width: calc(100% - 240px);
  margin: 0;
  padding: 20px 30px;
}

.games-section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #333;
}

/* 轮播样式 */
.featured-carousel {
  position: relative;
  height: 400px;
  margin-bottom: 40px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.carousel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.carousel-item.active {
  opacity: 1;
  z-index: 2;
}

.carousel-content {
  height: 100%;
  display: flex;
  position: relative;
  cursor: pointer;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #fff;
}

.carousel-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
}

.carousel-desc {
  font-size: 16px;
  margin-bottom: 20px;
  opacity: 0.9;
  max-width: 800px;
}

.carousel-actions {
  display: flex;
  gap: 15px;
}

.btn-play, .btn-download {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-play {
  background: #2ed573;
  color: #fff;
}

.btn-play:hover {
  background: #20bf6b;
  transform: translateY(-2px);
}

.btn-download {
  background: #fff;
  color: #333;
}

.btn-download:hover {
  background: #f0f0f0;
  transform: translateY(-2px);
}

.carousel-controls {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  z-index: 10;
}

.carousel-prev, .carousel-next {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-prev:hover, .carousel-next:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #fff;
  transform: scale(1.2);
}

/* 游戏卡片网格 */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.game-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.game-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.game-cover {
  position: relative;
  width: 100%;
  padding-top: 150%;
  overflow: hidden;
}

.game-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.game-card:hover .game-cover img {
  transform: scale(1.05);
}

.new-badge, .vip-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.new-badge {
  background: #ff4757;
  color: #fff;
}

.vip-badge {
  background: #ff9ff3;
  color: #fff;
}

.game-title {
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-meta {
  padding: 0 12px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.game-score {
  color: #ff6b6b;
  font-weight: 600;
}

.game-category {
  color: #666;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.game-stats {
  padding: 0 12px 12px;
  font-size: 12px;
  color: #999;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 分类卡片 */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.category-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.category-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.category-name {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.category-count {
  font-size: 14px;
  color: #666;
}

/* 我的游戏 */
.my-games-tabs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
}

.progress {
  height: 100%;
  background: #2ed573;
  transition: width 0.3s ease;
}

.game-progress {
  padding: 0 12px 8px;
  font-size: 14px;
  color: #666;
}

.btn-continue {
  margin: 0 12px 12px;
  width: calc(100% - 24px);
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: #2ed573;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-continue:hover {
  background: #20bf6b;
}

.favorite-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.filter-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.filter-button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fff;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.filter-button:hover, .filter-button.active {
  border-color: #2ed573;
  color: #2ed573;
  background: #f0f9f3;
}

.sort-select {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}

/* 发布日期 */
.release-date {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
}

/* 页脚 */
.app-footer {
  background: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
  margin-top: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}
</style>